<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>与背景联动的banner幻灯片</title>
		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
			}
			
			.box {
				width: 100%;
				height: 300px;
				background-color: #4085d2;
				margin-top: 50px;
			}
			
			.f {
				width: 760px;
				height: 300px;
				margin: auto;
				position: relative;
			}
			
			.pic,
			.nav {
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			/*#pic*/
			
			.pic li {
				position: absolute;
				top: 0px;
				left: 0px;
				z-index: 1;
			}
			
			.pic .nowpic {
				z-index: 6;
				opacity: 1;
			}
			/*navbg*/
			
			.navbg {
				width: 140px;
				height: 26px;
				position: absolute;
				left: 50%;
				top: 260px;
				margin-left: -70px;
				z-index: 9;
				background: #000;
				border-radius: 20px;
				opacity: 0.5;
			}
			/*nav*/
			
			.nav {
				width: 140px;
				height: 26px;
				position: absolute;
				left: 50%;
				top: 260px;
				margin-left: -70px;
				z-index: 10;
				text-align: center;
			}
			
			.nav li {
				display: inline-block;
				background-image: url(img/bg.png);
				background-position: -87px -116px;
				width: 12px;
				height: 12px;
				margin-top: 8px;
				cursor: pointer;
			}
			
			.nav li:hover {
				background-position: -74px -116px;
			}
			
			.nav li.navnow {
				background-position: -74px -116px;
			}
		</style>
		<script src="../../js/jquery-1.11.3.js"></script>
		<script src="jquery.flash2.js"></script>
	</head>

	<body>
		<div id="box" class="box">
			<div class="f">
				<ul class="pic">
					<li>
						<a href="#"><img src="img/1.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/2.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/3.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/4.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/5.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/6.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/7.jpg" width="760" height="300"></a>
					</li>
				</ul>
				<div class="navbg"></div>
				<ul class="nav">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<h1 id="test2"></h1>
		<div id="box2" class="box">
			<div class="f">
				<ul class="pic">
					<li>
						<a href="#"><img src="img/1.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/2.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/3.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/4.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/5.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/6.jpg" width="760" height="300"></a>
					</li>
					<li>
						<a href="#"><img src="img/7.jpg" width="760" height="300"></a>
					</li>
				</ul>
				<div class="navbg"></div>
				<ul class="nav">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<h1 id="test"></h1>


	</body>
<script>
	$('#box').myFocus()
	$('#box2').myFocus()
</script>
</html>